<script>
import funTool from '@/libs/funTool'
import subtreegrid from './sub-tree-grid'
import renderCol from './renderCol'
export default {
  name: 'subtreegrid',
  props: ['columns', 'data', 'grade'],
  components: {
    renderCol: renderCol,
    subtreegrid: subtreegrid,
  },
  data() {
    return {
      subData: [],
    }
  },
  render(h) {
    return (
      <table cellspacing="0" width="100%" cellpadding="0" border="0">
        {this.subData &&
          this.subData.map((row, index) => {
            return (
              <tbody class="ivu-table-tbody endTbody" key={row.id} index={index}>
                <tr class="data-row   treegrid-collapse ivu-table-row">
                  {this.columns.map((col, index) => {
                    let style = { 'padding-left': this.grade * 30 + 'px' }
                    let tdStyle = {}
                    if (col.width) {
                      tdStyle.width = col.width + 'px'
                    }
                    return (
                      <td style={tdStyle}>
                        {col.key ? (
                          col.render ? (
                            <renderCol col={col.render} param={{ row, index, col }} />
                          ) : (
                            <div class="ivu-table-cell">
                              {index == 0 ? (
                                <div class="treegrid-indent" style={style}>
                                  {row.children && row.children.length > 0 ? (
                                    <div class="ivu-table-cell-tree" style="margin-right: 5px;" onClick={() => this.expander(row)}>
                                      {h('Icon', {
                                        props: {
                                          type: row._expand ? 'md-remove' : 'md-add',
                                        },
                                      })}
                                    </div>
                                  ) : (
                                    ''
                                  )}
                                  {row[col.key]}
                                </div>
                              ) : (
                                <div class="text-center">{row[col.key]}</div>
                              )}
                            </div>
                          )
                        ) : (
                          <div class="ivu-table-cell"> {index}</div>
                        )}
                      </td>
                    )
                  })}
                </tr>

                <tr v-show={row._expand} class="treegrid-tr-tree ivu-table-row">
                  <td colspan={this.columns.length} style="border: none;">
                    <subtreegrid name={new Date().getTime()} columns={this.columns} data={row['children']} grade={this.grade + 1} />
                  </td>
                </tr>
              </tbody>
            )
          })}
      </table>
    )
  },

  mounted() {
    if (this.data) {
      this.subData = this.data
    }
  },
  watch: {
    data(val) {
      this.subData = JSON.parse(JSON.stringify(this.data))
      this.subData.forEach((p) => {
        p._expand = false
      })
    },
  },
  methods: {
    // 是否需要渲染子集
    isShowExpander(row) {
      return !funTool.IsNullorEmpty(row['children'])
    },
    expander(row) {
      this.subData.forEach((p) => {
        if (p.id !== row.id) {
          p._expand = false
        }
      })

      row._expand = !row._expand
      this.$forceUpdate()
    },
  },
}
</script>
